<blockquote class="layui-elem-quote layui-quote-nm">
    <form class="layui-form layui-form-pane" id="searchForm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <select name="status">
                        <option value="-1">全部</option>
                        <option value="1" >展示</option>
                        <option value="0">不展示</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">位置</label>
                <div class="layui-input-block">
                    <select name="position_id">
                        <option value="">全部</option>
                        {volist name="positionList" id="item"}
                        <option value="{$item['id']}">{$item['title']}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">创建时间</label>
                <div class="layui-input-inline" style="width: 150px">
                    <input id="start_date" type="text" name="start_date" placeholder="开始时间" class="layui-input" readonly>
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 150px">
                    <input id="end_date" type="text" name="end_date" placeholder="结束时间" class="layui-input" readonly>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-sm" id="searchBtn">查询</button>
                </div>
            </div>
        </div>
    </form>
</blockquote>

<table class="layui-hide" id="mytable" lay-filter="mytable"></table>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-radius layui-btn-primary layui-btn-sm" lay-event="add">添加广告</button>
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="setStatus1">设置展示</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="setStatus0">设置不展示</button>
        </div>
    </div>
</script>
<script type="text/html" id="optbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="statusSwitchTpl">
    <input type="checkbox" name="status" value="{{d.status}}" data-id="{{d.id}}" lay-skin="switch" lay-text="展示|不展示" lay-filter="checkStatus" {{d.status == 1 ? 'checked' : '' }}>
</script>

<script type="text/javascript">
    $(function(){
        //日期
        ybLaydate.render({
            elem: '#start_date'
        });
        ybLaydate.render({
            elem: '#end_date'
        });

        $("#searchBtn").click(function(){
            ybTable.reload('mytable',{
                page: {curr: 1}
                ,where: searchParamObj('searchForm')
            });
        });

        ybTable.render({
            elem: '#mytable'
            ,url: "{:url('getDataList')}"
            ,where: searchParamObj('searchForm')
            ,toolbar: '#toolbar'
            ,defaultToolbar: ['filter']
            ,title: '数据表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', width:80, title: 'ID'}
                ,{field:'title', title: '标题'}
                ,{field:'position_title', title: '位置'}
                ,{field:'start_time', title: '开始时间'}
                ,{field:'end_time', title: '结束时间'}
                ,{field:'sort', title: '排序'}
                ,{field:'status', title: '状态', templet: '#statusSwitchTpl'}
                ,{fixed: 'right', title:'操作', toolbar: '#optbar', width:150}
            ]]
            ,page: true
            ,response: {
                statusCode: 1 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            ,parseData: function(res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.count, //解析数据长度
                    "data": res.data.dataList //解析数据列表
                };
            }
        });

        //头工具栏事件
        ybTable.on('toolbar(mytable)', function(obj){
            switch(obj.event){
                case 'add':
                        ybLayer.open({
                            title: ['添加', 'font-size: 16px;font-weight: bold;'],
                            type: 2,
                            area: ['80%', '95%'],
                            fix: false,
                            scrollbar: false,
                            maxmin: true,
                            shade: [0.5, '#ffffff'],
                            shadeClose: false,
                            skin: 'layui-layer-rim',
                            content: "{:url('add', false, false)}"
                        });
                    break;
                case 'setStatus1':
                        var checkStatus = ybTable.checkStatus('mytable'),data = checkStatus.data;
                        if(data.length == 0){
                            ybLayer.msg('请选择需要操作的数据');
                            return false;
                        }
                        var ids = [];
                        for (var i= 0; i<data.length; i++){
                            ids.push(data[i].id)
                        }
                        ajaxPost("{:url('editStatusMany')}",{'ids':ids,'status':1},function(res){
                            ybLayer.msg(res.msg,{icon: 6});
                            setTimeout(function () {
                                ybTable.reload('mytable');
                            }, 1000);
                        },function(res){
                            ybLayer.msg(res.msg,{icon: 5});
                        })
                    break;
                case 'setStatus0':
                    var checkStatus = ybTable.checkStatus('mytable'),data = checkStatus.data;
                    if(data.length == 0){
                        ybLayer.msg('请选择需要操作的数据');
                        return false;
                    }
                    var ids = [];
                    for (var i= 0; i<data.length; i++){
                        ids.push(data[i].id)
                    }
                    ajaxPost("{:url('editStatusMany')}",{'ids':ids,'status':0},function(res){
                        ybLayer.msg(res.msg,{icon: 6});
                        setTimeout(function () {
                            ybTable.reload('mytable');
                        }, 1000);
                    },function(res){
                        ybLayer.msg(res.msg,{icon: 5});
                    })
                    break;
            }
        });

        //监听行工具事件
        ybTable.on('tool(mytable)',function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                ybLayer.open({
                    title: ['修改', 'font-size: 16px;font-weight: bold;'],
                    type: 2,
                    area: ['80%', '95%'],
                    fix: false,
                    scrollbar: false,
                    maxmin: true,
                    shade: [0.5, '#ffffff'],
                    shadeClose: false,
                    skin: 'layui-layer-rim',
                    content: "{:url('edit', false, false)}" + '?id=' + data.id
                });
                return false;
            }else if(obj.event === 'del'){
                ybLayer.confirm('确认要删除么', function(index){
                    ybLayer.close(index);
                    ajaxPost("{:url('del')}",{'id':data.id},function(res){
                        ybLayer.msg(res.msg,{icon: 6});
                        setTimeout(function () {
                            ybTable.reload('mytable');
                        }, 1000);
                    },function(res){
                        ybLayer.msg(res.msg,{icon: 5});
                    })
                });
                return false;
            }
        });

        //状态
        ybForm.on('switch(checkStatus)', function(obj){
            ajaxPost("{:url('editStatus')}",{'id':$(this).data('id'),'status':obj.elem.checked?1:0},function(res){
                ybLayer.msg(res.msg,{icon: 6});
                setTimeout(function () {
                    ybTable.reload('mytable');
                }, 1000);
            },function(res){
                ybLayer.msg(res.msg,{icon: 5});
                setTimeout(function () {
                    ybTable.reload('mytable');
                }, 1000);
            })
            return false;
        });
    })
</script>